<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="./common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鲜橙案例</title>
<!--加载head和footer公用的css开始-->
<link charset="utf-8" type="text/css" href="css/common.css" rel="stylesheet"/>
<!--加载head和footer公用的css结束-->
<!--加载service页面的css开始-->
<link charset="utf-8" type="text/css" href="css/case.css" rel="stylesheet"/>
<!--加载service页面的css结束-->
<!--加载公用的jquery的js开始-->
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<!--加载公用的jquery的js结束-->
<!--网页界面宽度随浏览器变化开始-->
<script type="text/javascript">
	$(document).ready(function(){
		var width = document.body.offsetWidth ;
		var w = width+"px";
		document.getElementById("headerActiveBac").style.width = w;
		document.getElementById("mainActiveBac").style.width = w;
		document.getElementById("footerMaskBac").style.width = w;
		document.getElementById("headerShadowBac").style.width = w;
	});
	
	window.onresize = function(){
		var width = document.documentElement.clientWidth;
		var w = width+"px";
		document.getElementById("headerActiveBac").style.width = w;
		document.getElementById("mainActiveBac").style.width = w;
		document.getElementById("footerMaskBac").style.width = w;
		document.getElementById("headerShadowBac").style.width = w;
	} 
	
</script>
<!--网页界面宽度随浏览器变化结束-->
<!--网页界面展示部分开始-->
<!--页面顶部slide开始-->
<link rel="stylesheet" href="css/global.css"></link>
<script src="js/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'image/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
</script>
<!--页面顶部slide结束-->
<!--网页界面展示部分结束-->
<style type="text/css"></style>
</head>

<body>
<!--页面内容开始-->
<div id="headerActiveBac" style="position:absolute; height:100px; background:url(image/headbac.png) repeat; overflow:visible; z-index:-100;"></div>
<div id="mainActiveBac" style=" margin-top:100px; position:absolute; height:298px; background:url(image/banner_anli_ext.png) repeat; overflow:visible; z-index:-100;"></div>
<div id="headerShadowBac" style="position:absolute; height:6px; background:url(image/shadow.png) repeat-x scroll left top transparent; overflow:visible;margin-top:100px;z-index:200;"></div>
<div class="clearfloat"></div>
<div class="content">
  <!--页面头部开始-->
  <div class="header">
    <div id="header_logo"><a href="index.action"><img style="border:none;"src="image/logo.png" alt="logo"/></a></div>
    <div id="header_nav">
      <ul>
        <li><a href="index.action">首页</a></li>
        <li><a href="about.html">关于鲜橙</a></li>
        <li><a style="color:#ea5404;" href="LoadCase.action">鲜橙案例</a></li>
        <li><a href="service.jsp">鲜橙服务</a></li>
        <li><a href="LoadProduct.action">鲜橙产品</a></li>
        <li><a href="contact.html">联系我们</a></li>
      </ul>
    </div>
  </div>
  <!--页面头部结束-->
  <div class="clearfloat"></div>
  <!--页面中间开始-->
  <div class="main">
    <!--页面中间导航开始-->
    <div id="main_nav">
      <div id="example">
        <div id="slides">
          <div class="slides_container">
			<s:iterator value="bannerPhotoList" status="photo">

            <div class="slide"> <img src="upload<s:property value='filelink' />" width="960" height="298" />            
            </div>   
			</s:iterator>      
          </div>
          <a href="#" class="prev"><img src="image/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="image/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
      </div>
    </div>
    <!--页面中间导航结束-->
    <div class="clearfloat"></div>
    <!--页面中间内容开始-->
    <div id="main_content">
      <div style="width:840px; overflow:hidden; float:left;">
		<s:iterator value="caseList" status="case">
        <div class="main_left" >
          <ul style="float:left; list-style:none; margin:0 auto; padding:0px;  margin-top:30px;">
            <li style="float:left;">
              <div style="float:left;"><img src="upload<s:property value='thumblink'/>" /></div>
              <div style="float:left;">
                <ul style="list-style:none; margin-top:10px; ">
                  <li style="color:#000; height:35px;"><span style="font-size:24px;"><s:property value='title'/></span></li>
                  <li style="color:#000; font-size:12px; margin-top:10px;"><span style="color:#999;"><s:date format="yyyy年MM月案例更新" name="createTime" /></span></li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="clearfloat"></div>
          <p style="width:780px;font-size:12px;line-height:2.5;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <s:property value='summary'/></p>
          <img src="upload<s:property value='photolink'/>" /> 
		</div>
		</s:iterator>
      </div>
      <div id="main_right" >
        <ul style="list-style:none; margin-top:0px;">
          <li style="position:absolute;">
            <div style=" float:left; width:38px; height:38px; background-color:#FFF; "><img width="38" height="38" src="image/ad_design.jpg" /></div>
            <div style=" margin-left:53px;">
				<s:url action="LoadCase" id="lc">
					<s:param name="typeIndex" value="0"></s:param>
				</s:url>
				<s:a href="%{lc}">
					<span style="font-size:14px;">广告设计</span>
				</s:a>
			</div>
          </li>
          <div class="clearfloat"></div>
          <li style=" margin-top:50px; position:absolute; ">
            <div style=" float:left; width:38px; height:38px; background-color:#FFF; "><img width="38" height="38" src="image/gift_design.jpg" /></div>
			<div style="  margin-left:53px;">
				<s:url action="LoadCase" id="lc">
					<s:param name="typeIndex" value="1"></s:param>
				</s:url>
				<s:a href="%{lc}">
					<span style="font-size:14px;">企业礼品定制</span>
				</s:a>
			</div>        
          </li>
          <div class="clearfloat"></div>
          <li style=" margin-top:100px; position:absolute;">
            <div style=" float:left; width:38px; height:38px; background-color:#FFF; "><img width="38" height="38" src="image/ui_design.jpg" /></div>
			<div style=" margin-left:53px;">
				<s:url action="LoadCase" id="lc">
					<s:param name="typeIndex" value="2"></s:param>
				</s:url>
				<s:a href="%{lc}">
					<span style="font-size:14px;">UI设计</span>
				</s:a>
			</div>               
          </li>
          <div class="clearfloat"></div>
          <li style=" margin-top:150px; position:absolute;">
            <div style=" float:left; width:38px; height:38px; background-color:#FFF; "><img width="38" height="38" src="image/game_design.jpg" /></div>
			<div style="  margin-left:53px;">
				<s:url action="LoadCase" id="lc">
					<s:param name="typeIndex" value="3"></s:param>
				</s:url>
				<s:a href="%{lc}">
					<span style="font-size:14px;">游戏研发</span>
				</s:a>
			</div>      
          </li>
          <div class="clearfloat"></div>
          <li style=" margin-top:200px; position:absolute;">
            <div style=" float:left; width:38px; height:38px; background-color:#FFF; "><img width="38" height="38" src="image/cartoon_design.jpg" /></div>
			<div style=" margin-left:53px;">
				<s:url action="LoadCase" id="lc">
					<s:param name="typeIndex" value="4"></s:param>
				</s:url>
				<s:a href="%{lc}">
					<span style="font-size:14px;">鲜橙动漫</span>
				</s:a>
			</div>             
          </li>
        </ul>
      </div>
    </div>
    <!--页面中间内容结束-->
  </div>
  <!--页面中间结束-->
  <div class="clearfloat"></div>
  <!--页面底部开始-->
  <div class="footer">
    <div id="footer_nav">
      <ul>
        <li><a href="index.action">首页</a></li>
        <li><a href="about.html">关于鲜橙</a></li>
        <li><a href="LoadCase.action">鲜橙案例</a></li>
        <li><a href="service.jsp">鲜橙服务</a></li>
        <li><a href="LoadProduct.action">鲜橙产品</a></li>
        <li><a href="contact.html">联系我们</a></li>
      </ul>
      <div style="margin-left:80px; margin-top:37px;"><span style="font-size:12px; color:#696969; font-weight:bold;"> © 2011 SUNSUM All rights reserved.</span></div>
    </div>
  </div>
  <!--页面底部结束-->
</div>
<div id="footerMaskBac" style=" margin-top:-120px; position:absolute; height:120px; background:url(image/footerBac_ext.png) repeat; overflow:visible; z-index:-100;"></div>
<!--页面内容结束-->
</body>
</html>
